<!--  -->
<template>
  <div>
    <van-icon @click="back" name="arrow-left" />
    <div class="headImg"></div>

    <van-form @submit="onSubmit" :show-error="false">
      <van-field
        :border="false"
        v-model="username"
        name="tel"
        placeholder="请输入手机号"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        class="pwd"
        :border="false"
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-button native-type="submit">登录</van-button>
    </van-form>
    <div class="link">
      <span>注册</span>
      <span>忘记密码</span>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    onSubmit(values) {
      Toast("登录成功");
      // sessionStorage.setItem("userInfo", JSON.stringify(values));
      // setTimeout(() => {
      //   this.$router.push("/");
      // }, 2000);
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.van-icon {
  margin-top: 10px;
  margin-left: 48px;
  opacity: 0.5;
  color: #fff;
  font-size: 40px;
}
.headImg {
  margin: 0 auto;
  margin-top: 186px;
  width: 198px;
  height: 178px;
  background: url(~@/assets/images/login/login2.png) no-repeat center;
  background-size: 100%;
}
.van-form {
  margin-top: 50px;
  .van-field {
    opacity: 0.33;
    font-size: 30px;
    color: #ffffff;
    //光标颜色
    caret-color: #fff;
    margin: 0 auto;
    width: 508px;
    height: 80px;
    padding-left: 96px;
    margin-top: 44px;
    background: #33363d url(~@/assets/images/login/login3.png) no-repeat 52px
      22px /28px;
    box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.2);
    border-radius: 22px;
    line-height: 60px;
    /deep/.van-field__body {
      font-size: 28px;
      input {
        color: #fff;
      }
    }
  }
  .van-field.pwd {
    background: #33363d url(~@/assets/images/login/login1.png) no-repeat 52px
      22px /28px;
  }
}
.van-button {
  margin-top: 136px;
  margin-left: 122px;
  border: none;
  font-size: 35px;
  color: #ffffff;
  width: 506px;
  height: 80px;
  background-image: linear-gradient(150deg, #f25b86 0%, #f1ac5e 100%);
  box-shadow: 0 8px 28px 0 rgba(0, 0, 0, 0.57);
  border-radius: 22px;
}
.link {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
  margin-left: 122px;
  width: 506px;
  opacity: 0.59;
  font-size: 28px;
  color: #ffffff;
}
</style>
